<template>
  <div v-if="visible" class="modal-overlay" @click.self="close">
  <!-- 移除了modal-overlay，直接显示内容 -->
  <div class="modal-content" v-if="visible">
    <span class="close-btn" @click="close">&times;</span>
    <h3>修改收货地址</h3>

    <form @submit.prevent="saveAddress">
      <div class="form-group">
        <label>区域</label>
        <input v-model="form.addressArea" type="text" required>
      </div>

      <div class="form-group">
        <label>详细地址</label>
        <input v-model="form.addressDetail" type="text" required>
      </div>

      <div class="form-group">
        <label>联系人</label>
        <input v-model="form.addressLinkman" type="text" required>
      </div>

      <div class="form-group">
        <label>联系电话</label>
        <input v-model="form.addressPhone" type="tel" required>
      </div>

      <button type="submit" class="btn-submit">保存修改</button>
    </form>
  </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { BASE_URL } from "@/util/Config.js";
import { useUserStore } from '@/stores/user';

export default {
  props: {
    visible: Boolean,
    addressId: Number
  },
  emits: ['close', 'saved'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    const form = ref({
      addressArea: '',
      addressDetail: '',
      addressLinkman: userStore.userInfo?.userName || '',
      addressPhone: userStore.userInfo?.userPhone || ''
    });

    watch(() => props.addressId, async (newId) => {
      if (newId) {
        try {
          const response = await fetch(`${BASE_URL}/my/addresses/${newId}`);
          const result = await response.json();
          if (result.code === 200 && result.data) {
            form.value = {
              addressArea: result.data.addressArea,
              addressDetail: result.data.addressDetail,
              addressLinkman: result.data.addressLinkman || userStore.userInfo?.userName || '',
              addressPhone: result.data.addressPhone || userStore.userInfo?.userPhone || ''
            };
          }
        } catch (error) {
          console.error('加载地址失败:', error);
        }
      }
    }, { immediate: true });

    const close = () => emit('close');

    const saveAddress = async () => {
      try {
        const response = await fetch(`${BASE_URL}/my/addresses/${props.addressId}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            userId: userStore.userInfo?.userId,
            ...form.value
          })
        });

        if (response.ok) {
          emit('saved');
          close();
        }
      } catch (error) {
        console.error('保存修改失败:', error);
      }
    };

    return {
      form,
      close,
      saveAddress
    };
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* 修改后的样式 - 无遮罩 */
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border: 1px solid #ddd; /* 添加边框 */
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-submit {
  background-color: #2ecc71;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}

.btn-submit:hover {
  background-color: #27ae60;
}
</style>